Client Component

ブラウザとサーバの両方で実行されるコンポーネント

従来の SSR でレンダリングされていたコンポーネントのようなイメージ

SSR よりも、より範囲を絞ってバンドル可能に

インタラクティブな操作が必要な場合に用いられる

React Server Component は Hydration が無いため、インタラクティブな操作を実現できない

作成するには、ファイルの先頭で use client ディレクティブを記述すればよい

use client の後のコードは、インタラクションに必要な処理が含まれているものとして、ブラウザ向けにハンドルされてブラウザに送られる

warning.icon「Client Component = ファイルの先頭に use client ディレクティブが存在する」のではない

code:tsx

"use client";

import { useState } from "react";

export default function Counter() {

const count, setCount = useState(0);

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>Click me</button>

</div>

);

}

これにより、ブラウザに送る JavaScript を必要最小限に抑え、パフォーマンスの向上が見込める

warning.icon Client Component から import されるコンポーネントや関連ファイルも、ブラウザ向けにバンドルされる